<template>
        <div class="playerinformation">
		<el-form label-width="100px" class="searchform">
		  <el-form-item label="老人姓名:">
		    <el-input v-model="serchForm.name" placeholder="请输入姓名"></el-input>
		  </el-form-item>
		  <el-form-item label="申请日期">
					<el-col :span="11">
					<el-form-item prop="date1">
						<el-date-picker type="date" placeholder="选择日期" v-model="serchForm.date" style="width: 200px;"></el-date-picker>
					</el-form-item>
					</el-col>
				</el-form-item>
        
		</el-form>
		<el-button type="primary" @click="search()">查询</el-button>
		<!-- <el-button type="primary" @click="dialogFormVisible = true">添加</el-button> -->
		
		  <el-table
		    :data="tableData"
			stripe=""
		    border
			fit
		    style="width: 100%"
			:header-cell-style="{textAlign: 'center'}"
			:cell-style="{ textAlign: 'center' }">
			<el-table-column type="index" label="序号"></el-table-column>
			<el-table-column prop="id" label="记录编号" v-if="false"></el-table-column>
			<el-table-column prop="oldmanId" label="老人编号" width="100px"></el-table-column>
            <el-table-column prop="oldmanName" label="老人姓名" width="100px"></el-table-column>
            <el-table-column prop="date" label="申请日期"></el-table-column>
			
            <el-table-column prop="applicationContent" label="申请内容"></el-table-column>
		    <el-table-column prop="serviceType" label="服务类型" width="100px"></el-table-column>
			<el-table-column prop="price" label="费用/元" width="100px"></el-table-column>
			<el-table-column prop="reason" label="申请原因" show-overflow-tooltip></el-table-column>
			
			<el-table-column prop="state" label="申请状态" width="100px"></el-table-column>
		    <el-table-column fixed="right" align="center" label="操作">
			<template slot-scope="scope">
				<!-- <el-button type="text" size="small" @click="reason(scope.row)">查看</el-button> -->
				<el-button type="text" size="small" @click="edit(scope.row)">通过</el-button>
				<el-button type="text" size="small" @click="edit(scope.row)">拒绝</el-button>
				<el-button type="text" size="small" @click="edit(scope.row)">删除</el-button>
			</template>
		    </el-table-column>
		  </el-table>

		  <!-- 分页 -->
		  <div style="text-align:right;">
			  <el-pagination
			background
			layout="prev, pager, next"
			:total="1000">
			</el-pagination>
		  </div>


		<el-dialog title="申请原因" :visible.sync="dialogFormVisibleReason" width="400px">
			{{requestReason}}
		</el-dialog>

	</div>
</template>

<script>
    export default{
		name:"ServiceList",
		data(){
			return{
                activeName :'one',
				options: [{
				value: '选项1',
				label: '监护人员'
				}, {
				value: '选项2',
				label: '护理人员'
				}, {
				value: '选项3',
				label: '管理人员'
				}],
				value:"",
				serchForm:{
				name:'',
				date:''
				},
				 tableData : [{
					id : 10001,
					oldmanId : 100001,
					oldmanName : '张武',
					applicationContent:'换护理人',
					serviceType :  '',
					date : '2020-10-1',
					price : '',
					state : 1 == 1 ? '已通过' : '待审核',
					reason:'不喜欢这个护理人，想换一个'
				 },{
					id : 10001,
					oldmanId : 100001,
					oldmanName : '张武',
					applicationContent:'护理服务',
					serviceType :  '按摩',
					date : '2020-10-1',
					price : 100,
					state : 1 == 1 ? '已通过' : '待审核',
					reason:'不舒服'
				 },{
					id : 10001,
					oldmanId : 100001,
					oldmanName : '张武',
					applicationContent:'护理服务',
					serviceType :  '按摩',
					date : '2020-10-1',
					price : 100,
					state : 1 == 1 ? '已通过' : '待审核',
					reason:'不舒服'
				 },{
					id : 10001,
					oldmanId : 100001,
					oldmanName : '张武',
					applicationContent:'护理服务',
					serviceType :  '按摩',
					date : '2020-10-1',
					price : 100,
					state : 1 == 1 ? '已通过' : '待审核',
					reason:'不舒服'
				 },{
					id : 10001,
					oldmanId : 100001,
					oldmanName : '张武',
					applicationContent:'换房间',
					serviceType :  '',
					date : '2020-10-1',
					price : '',
					state : 1 == 1 ? '已通过' : '待审核',
					reason:'不喜欢这个房间，想换个地方住'
				 }],
				dialogFormVisibleReason:false,
				requestReason:''
			}
		},
		methods:{
             handleClick(tab, event) {
            console.log(tab, event);
        },
			//查看
			handleClick(row) {
				console.log(row);
				this.dialogVisible1 = true
			},
			search(){
				console.log(this.name,this.nickname,this.uid)
			},
			handleClose(done) {
				// this.$confirm('确认关闭？')
				// .then(_ => {
				// 	done();
				// })
				// .catch(_ => {});
				this.dialogVisible1 = false
			},
			//删除
			del(row){
				confirm('是否删除'+row.id)
			},
			//查看原因
			reason(row){
				this.dialogFormVisibleReason = true
				this.requestReason = row.reason
			},
			//修改
			edit(row){
				console.log(row)
			},
			submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
		}
	}
</script>

<style>
    .searchform{
	  display: flex;
	  float: left;
	}
	.playerinformation .el-button{
		margin-left: 15px;
	}
</style>